import $ from 'jQuery';
(function () {
    let $vue = new Vue({
        el: '.agent-main-hook',
        data: {
            boxs: {
                box1: {show: true, hook: '.box1-hook', lock: true, url: '', params: {}},
            },
            account:{
                'palletCirculation':'',//流转状态
                'palletNonCirculation':'',//非流转状态
            },
            companyId:'',
        },
        methods: {
            searchForm:function(){
                var $form = $('.form-search-hook');
                var formParams = $form.serializeJson();
                IOT.getServerData(URI.STATISTIC.AGENT.DATA,formParams , (ret) => {
                    if (ret.code === 200) {
                        this.account = $.extend({}, this.account, ret.data);
                        this.drawLine();
                    } else {
                        IOT.tips(ret.message || '服务器请求失败，稍后再试！', 'error');
                    }
                });
            },
            emitPage: function () {
                M.Page.load(this.boxs);
            },
            // 上一页
            prePage: function () {
                M.Page.prePage(this.boxs);
            },
            // 触发刷新页(当前显示的页面)
            refreshPage: function () {
                M.Page.refreshPage(this.boxs);
            },
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('myChart'));
                // 绘制图表
                myChart.setOption({
                    title : {
                        text: '动态利用率统计',
                        subtext: '',
                        x:'left'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c}块 ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        align: 'right',
                        data: ['非流转状态','流转状态']
                    },
                    series : [
                        {
                            name: '动态利用率统计',
                            type: 'pie',
                            radius : '70%',
                            center: ['50%', '55%'],
                            data:[
                                {value:this.account.palletNonCirculation||0, name:'非流转状态'},
                                {value:this.account.palletCirculation||0, name:'流转状态'},
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                });
                window.onresize = myChart.resize;
            }
        },
        created: function () {
            IOT.getServerData(URI.STATISTIC.AGENT.DATA, {}, (ret) => {
                if (ret.code === 200) {
                    this.account = $.extend({}, this.account, ret.data);
                    this.drawLine();
                } else {
                    IOT.tips(ret.message || '服务器请求失败，稍后再试！', 'error');
                }
            });
        },
        mounted: function () {
            this.drawLine();
            this.$nextTick(() => {
                var $accountBox = $('.agent-hook');
                $accountBox.find('.area-hook').selectpicker({width: '120px'});
                $accountBox.find('.agent-status-hook').selectpicker({width: '80px'});
                // 查询
                var todDay = new Date();
                $('#todDate').val(todDay.Format('yyyy-MM-dd'));
                $accountBox.find('#todDate').datetimepicker({
                    width: '320px',
                    format: 'Y-m-d',
                    formatDate: 'Y-m-d',
                    maxDate:todDay,
                    scrollMonth: false,
                    scrollTime: false,
                    scrollInput: false,
                    timepicker: false // 关闭时间选项
                });
                let tableHookName = '.performance-table-hook';
            });
        }
    });
})();